import { useState } from 'react';
import style from './index.module.scss';
import bg_rule from '@/assets/images/christmas/reward/bg-rule.png';
import bg_shou from '@/assets/images/christmas/reward/bg-shou.png';
import bg_song from '@/assets/images/christmas/reward/bg-song.png';
import bg_zhao from '@/assets/images/christmas/reward/bg-zhao.png';
import reward_shou from '@/assets/images/christmas/reward/reward-shou.png';
import reward_song from '@/assets/images/christmas/reward/reward-song.png';
import reward_zhao from '@/assets/images/christmas/reward/reward-zhao.png';
import title from '@/assets/images/christmas/title.mp4';
import Content from './content';
const Index = () => {
    const [showPage, setShowPage] = useState(0);
    const [type, setType] = useState(1);
    return (
        <>
            {showPage !== 1 && showPage !== 2 && (
                <div className={style.container}>
                    <video
                        controls={false}
                        autoplay="autoplay"
                        muted
                        playsinline
                        loop
                    >
                        <source src={title} type="video/mp4" />
                    </video>
                    {/* <img src={bg} alt="背景图" /> */}
                    <div
                        className={`${style.btn} ${style.btn1}`}
                        onClick={() => setShowPage(1)}
                    >
                        {/* 奖励 */}
                    </div>
                    <div
                        className={`${style.btn} ${style.btn2}`}
                        onClick={() => setShowPage(2)}
                    >
                        {/* 规则 */}
                    </div>
                    <Content type={1} />
                </div>
            )}
            {showPage === 1 && (
                <div className={style.questionWrap}>
                    <div
                        className={style.content}
                        style={{
                            backgroundImage: `url(${
                                type === 1
                                    ? bg_song
                                    : type === 2
                                    ? bg_shou
                                    : bg_zhao
                            })`,
                        }}
                    >
                        <div className={style.btn_box}>
                            <div
                                className={`${style.btn_switch}  ${
                                    type === 1 ? '' : style.no_select
                                }`}
                                onClick={() => setType(1)}
                            >
                                送铃铛
                            </div>
                            <div
                                className={`${style.btn_switch} ${
                                    type === 2 ? '' : style.no_select
                                } `}
                                onClick={() => setType(2)}
                            >
                                收铃铛
                            </div>
                            <div
                                className={`${style.btn_switch} ${
                                    type === 3 ? '' : style.no_select
                                } `}
                                onClick={() => setType(3)}
                            >
                                找帽子
                            </div>
                        </div>
                        {type === 1 && <img src={reward_song} alt="图片" />}
                        {type === 2 && <img src={reward_shou} alt="图片" />}
                        {type === 3 && <img src={reward_zhao} alt="图片" />}
                    </div>
                    <div
                        className={style.btn_back}
                        onClick={() => setShowPage(0)}
                    ></div>
                </div>
            )}
            {showPage === 2 && (
                <div
                    className={`${style.questionWrap} ${style.questionWrap1}`}
                    onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                    }}
                >
                    <div
                        className={style.btn_back}
                        onClick={() => setShowPage(0)}
                    ></div>
                    <div className={style.content_box}>
                        <img src={bg_rule} alt="图片" />

                        <div className={style.ruleDetail}>
                            <p>
                                1、本活动时间为12月23日-12月28日，截止到12月28日23:59:59;
                            </p>
                            <p>
                                2、送出/收到专属圣诞节礼物，1钻石对应1点铃铛值；
                            </p>
                            <p>
                                3、收铃铛排行榜前三名即可获得额外钻石奖励+实物/虚拟道具奖励，(额外奖励需满足最低铃铛值要求，第一名最低51000铃铛值;第二名最低26000铃铛值;第三名最低16000铃铛值，达不到要求不予发放)；
                            </p>
                            <p>
                                4、活动截止后如果送铃铛/收铃铛/找帽子如果出现数值相同的情况，如第一名和第二名都是1000铃铛值的情况，先到的为第一名，后到的为第二名；
                            </p>
                            <p>
                                5、奖励发放时间将在活动结束后5个工作日发放，若奖励未到账，请请关注微信公众号「pupu找搭子」私聊进行领取;
                            </p>
                            <p>
                                6、最终解释权归PUPU找搭子所有，该活动与苹果公司无关。
                            </p>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default Index;
